<script setup>
import { ref,defineEmits, defineProps, watch, onMounted} from 'vue'
// import imag from '../assets/images/animate1/0000.png'
const num = ref([0,0])
const changeNumber1=(num1)=>{
    let time = setInterval(()=>{
        num.value[0] += 10
        if(num.value[0]>=num1){
            num.value[0]=num1
            clearInterval(time)
        }
    },10)
    
}
const changeNumber2=(num1)=>{
    let time = setInterval(()=>{
        num.value[1] += 10
        if(num.value[1]>=num1){
            num.value[1]=num1
            clearInterval(time)
        }
    },10)
    
}
onMounted(()=>{
    changeNumber1(2126)
    changeNumber2(2744)
})

</script>

<template>
<div class="wrap">
    <div class="number">
        <div class="dz">{{ num[0] }}</div>
        <div class="dz">{{ num[1]}}</div>
    </div>
    <div class="text">
        <div>需停运一次设备</div>
        <div>短时无法变更设备</div>
    </div>
</div>
</template>

<style scoped>
.wrap {
    display: block;
    width: 100%;
    margin-top: 52px;
}
.number{
    width: 350px;
    height: 165px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}
.dz {
    width:213px;
    height: 150px;
    font-family: 'DINPro';
    background: url(../assets/images/dizou.png) no-repeat bottom center;
    display: flex;
    justify-content: center;
    color: #76FFFF;
    text-shadow: 0px 1px 6px 0px #29F1FA7F;
    font-weight: bold;
    font-size: 30px;
    padding-top:50px;
}
.text {
    width: 350px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}
.text div {
    width:157px;
    color: rgba(149,209,255,0.7);
    font-family: Alibaba PuHuiTi 3.0;
    font-weight: 55 Regular;
    font-size: 10px;
    line-height: normal;
    letter-spacing: 0px;
    text-align: center;

}
</style>
